<template>
  <van-popup v-model:show="showPopup" position="right" destroy-on-close :style="{ width: '100%', height: '100%' }" teleport="body">
    <van-nav-bar :title="operation === 'add' ? '新增产品' : '编辑产品'" fixed @click-right="showPopup = false">
      <template #right>
        <van-icon name="cross" size="18" />
      </template>
    </van-nav-bar>
    <div class="form-wrapper">
      <van-form @submit="onSubmit">
        <van-cell-group>
          <van-field v-model="form.productName" label="产品名称" colon placeholder="请输入产品名称" :rules="[{ required: true, message: '请输入产品名称' }]" />
          <van-field v-model="form.productCode" label="产品代码" colon placeholder="请输入产品代码" :rules="[{ required: true, message: '请输入产品代码' }]" />
          <van-field v-model="form.dividendPercent" label="分红比例" colon placeholder="请输入分红比例" :rules="[{ required: true, message: '请输入分红比例' }]" />
        </van-cell-group>
        <van-cell-group>
          <van-field v-model="form.productNameAlias" label="名称别名" colon placeholder="请输入名称别名" />
          <van-field v-model="form.productCodeAlias" label="代码别名" colon placeholder="请输入代码别名" />
        </van-cell-group>
        <van-cell-group v-if="operation === 'add'" title="初始净值">
          <van-field
            v-model="form.netDate"
            label="净值日期"
            colon
            readonly
            right-icon="calendar-o"
            placeholder="点击选择日期"
            :rules="[{ required: true, message: '请选择日期' }]"
            @click="showDatePicker = true"
          />
          <van-popup v-model:show="showDatePicker" destroy-on-close position="bottom">
            <van-date-picker :model-value="pickerValue" title="选择日期" @confirm="onDatePickerConfirm" @cancel="showDatePicker = false" />
          </van-popup>
          <van-field
            v-model="form.currentNetValue"
            label="净值"
            colon
            type="number"
            placeholder="请输入净值"
            :rules="[{ required: true, message: '请输入净值' }]"
          />
        </van-cell-group>
        <div class="btn-wrapper">
          <van-button class="btn-item" block type="default" @click="showPopup = false"> 取消 </van-button>
          <van-button class="btn-item" block type="primary" native-type="submit"> 保存 </van-button>
        </div>
      </van-form>
    </div>
  </van-popup>
</template>

<script setup>
import { ref } from 'vue'
import { apiEditProduct, apiAddProduct } from '@/api/product'
import { showToast } from 'vant'
import { deepClone } from '@/utils/common'
import dayjs from 'dayjs'

const emit = defineEmits(['refresh'])

const showPopup = ref(false)
const form = ref({})
const operation = ref('edit')
const showDatePicker = ref(false)
const pickerValue = ref([dayjs().get('year'), dayjs().get('month') + 1, dayjs().get('date')])

const open = (product, type) => {
  form.value = deepClone(product)
  operation.value = type
  showPopup.value = true
}

const onDatePickerConfirm = ({ selectedValues }) => {
  pickerValue.value = selectedValues
  form.value.netDate = dayjs(pickerValue.value).format('YYYY/MM/DD')
  showDatePicker.value = false
}

const onSubmit = () => {
  let result
  const params = {
    ...form.value,
    netDate: dayjs(form.value.netDate).format('YYYY-MM-DD')
  }
  if (operation.value === 'add') {
    result = apiAddProduct(params)
  } else {
    result = apiEditProduct(params)
  }
  result.then((res) => {
    showToast({
      message: '保存成功',
      position: 'top'
    })
    setTimeout(() => {
      showPopup.value = false
      emit('refresh')
    }, 500)
  })
}

defineExpose({
  open
})
</script>

<style lang="less" scoped>
.form-wrapper {
  padding-top: var(--van-nav-bar-height);
  .btn-wrapper {
    padding: 16px;
    display: flex;
    justify-content: space-between;
    .btn-item {
      width: 47%;
    }
  }
}
</style>
